<template>
  <div class="product-add">
    <!--form表单-->
    <el-form
      size="small"
      ref="formRef"
      :model="form"
      label-width="250px"
      :rules="rules"
    >
      <!--公众号设置-->
      <div class="common-form">公众号设置</div>
      <el-form-item label="登录模式">
        <el-radio-group v-model="form.mpState">
          <el-radio :label="1">公众号登录</el-radio>
          <el-radio :label="0">手机号登录</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.mpState">
        <el-form-item
          label="AppID 公众号ID"
          prop="mpappId"
          :rules="form.mpState != 1 ? rules.target : [{ required: false }]"
        >
          <el-input v-model="form.mpappId" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item
          label="AppSecret 公众号密钥"
          prop="mpappSecret"
          :rules="form.mpState != 1 ? rules.target : [{ required: false }]"
        >
          <el-input v-model="form.mpappSecret" class="max-w460"></el-input>
        </el-form-item>
      </template>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import AppSettingApi from "@/api/appsetting.js";

export default {
  data() {
    return {
      /*form表单数据*/
      form: {
        mpState: 0,
      },
      rules: {
        mpappId: [
          { required: true, message: "AppID 公众号ID必填", trigger: "blur" },
        ],
        mpappSecret: [
          { required: true, message: "AppSecret 公众号密钥", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getData();
    this.getMpLoginSetting();
  },

  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      AppSettingApi.appmpDetail({}, true)
        .then((res) => {
          if (res.data != null) {
            self.form = Object.assign(self.form, res.data);
          }
        })
        .catch((error) => {});
    },
    getMpLoginSetting() {
      let self = this;
      AppSettingApi.mpLoginSetting({}, true)
        .then((res) => {
          self.form.mpState = res.data.mpState;
        })
        .catch((error) => {});
    },

    /*提交表单*/
    onSubmit() {
      let self = this;
      let params = this.form;
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          AppSettingApi.editAppMp(params, true)
            .then((data) => {
              ElMessage({
                message: "恭喜你，设置成功",
                type: "success",
              });
              self.$router.push("/appsetting/appmp/index");
            })
            .catch((error) => {});
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tips {
  color: #ccc;
}
</style>
